<template>
  <div
    @touchstart="touchStart"
    @touchmove.prevent="touchMove"
    @touchend="touchEnd"
    ref="popup"
    class="popup"
  >
    <slot></slot>
  </div>
</template>

<script>
export default {
  methods: {
    // 按下
    touchStart({ touches }) {
      this.prepos = touches[0];
    },
    // 移动
    touchMove({ touches }) {
      this.curpos = touches[0];
      // 记录移动的位置
      let flow = this.curpos.pageX - this.prepos.pageX;
      // 临界判断
      if (flow < 0) {
        flow = 0;
      }
      // 设置样式
      this.$refs.popup.style.transform = `translateX(${flow}px)`;
      // console.log(flow)
      // popup
    },
    // 抬起
    touchEnd() {
      // 事件兼容
      if (this.curpos) {
        // 记录移动的位置
        let flow = this.curpos.pageX - this.prepos.pageX;
        // 如果移动的距离是大于设备的十分之三,则收起
        if (flow > window.innerWidth * 0.3) {
          this.$refs.popup.style.transform = `translateX(${
            window.innerWidth * 0.7
          }px)`;
          // this.flag = false;
          this.$emit("changeFlag", false);
        } else {
          this.$refs.popup.style.transform = `translateX(0)`;
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.popup {
  position: fixed;
  height: 100%;
  overflow-y: scroll;
  top: 0;
  right: 0;
  width: 260px;
  background: #fff;
  animation: sliderin 0.3s linear;
}

@keyframes sliderin {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(0);
  }
}
</style>